<template>
  <div style="width: 100%; height: 80%; ">
    <el-table-v2
      :columns="columns"
      :data="data"
      :width="1200"
      :height="400"
      fixed
    />
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
      "
    >
      <div>
        <input
          class="search-input"
          type="text"
          v-model="searchValue"
          placeholder="请输入关键词会出现相关内容"
        />
      </div>
      <fenye
        @page-data="handlePageData"
        style="width: 742px; height: 32"
      ></fenye>
      <el-button type="primary" @click="addData">注册用户</el-button>
    </div>
  </div>
</template>

<script>
import { ref, reactive, watch } from "vue";
import { computed, inject, provide, toRaw } from "vue";
import dayjs from "dayjs";
import {
  ElButton,
  ElIcon,
  ElTag,
  ElTooltip,
  TableV2FixedDir,
} from "element-plus";
import { useRouter } from "vue-router";
import fenye from "./fenyeqi.vue";
import { ElMessage } from "element-plus";
export default {
  name: "MyTable",
  setup() {
    const router = useRouter();
    const searchValue = ref(""); // 搜索关键词
    let id = 0;
    const su1 = ["账户名", "密码", "操作"];
    const store = inject("store");
    const data111 = computed(() => store.state.zhanghui);
    const su = ["username", "password", "operations"];
    const dataGenerator = () => ({
      id: `random-id-${id}`,
      name: "Tom",
      date: "2020-10-1",
    });

    const columns = ref(
      su.map((key, index) => ({
        key: key,
        dataKey: key,
        width: 400,
        title: su1[index],
        fixed: index === 0 ? TableV2FixedDir.LEFT : undefined,
        align: "center",
        cellRenderer: ({ cellData, column, rowData }) => {
          if (column.key === "date") {
            return (
              <ElTooltip content={dayjs(cellData).format("YYYY/MM/DD")}>
                <span class="flex items-center">
                  <ElIcon class="mr-3">
                    <Timer />
                  </ElIcon>
                  {dayjs(cellData).format("YYYY/MM/DD")}
                </span>
              </ElTooltip>
            );
          } else if (column.key === "password") {
            let shu = computed(() => store.state.username);
            if(shu.value == "huang"){
              return <span>{cellData}</span>
            }else{
              return <span>*******</span>;
            }
           
          } else if (column.key === "operations") {
            const cre = () => {
              let shu = computed(() => store.state.username);
              if (shu.value == "huang") {
                rowData.password = '123456'
                store.commit('shanchuzhanghui',data111.value)
                ElMessage({
                  type: "success",
                  message: "密码默认为123456",
                });
              } else {
                ElMessage({
                  type: "warning",
                  message: "你不是管理员",
                });
              }
            };
            const chanchu = () => {
              let shu = computed(() => store.state.username);
              // console.log(shu.value);
              if (shu.value == "huang") {
                const index = data111.value.findIndex(
                  (item) => item.username === rowData.username
                );
                // console.log(index);
                if (index !== -1) {
                  if(rowData.username == shu.value){
                    ElMessage({
                  type: "warning",
                  message: "不能删除管理员",
                });
                  }else{
                    data111.value.splice(index, 1);
                    store.commit('shanchuzhanghui',data111.value)
                  ElMessage({
                    type: "success",
                    message: "删除成功",
                  });
                  }
                } 
              } else {
                ElMessage({
                  type: "warning",
                  message: "你不是管理员",
                });
              }
              // console.log(rowData);
            };
            return (
              <>
                <ElButton size="small" onClick={() => cre()}>
                  初始化密码
                </ElButton>
                <ElButton size="small" type="danger" onClick={() => chanchu()}>
                  删除
                </ElButton>
              </>
            );
          } else {
            return <ElTag>{cellData}</ElTag>;
          }
        },
      }))
    );

    function handlePageData(dataye1) {
      data.value = dataye1;
    }
    const data1 = ref(data111.value);
    const data = ref(data111.value);
    const searchResult = computed(() => {
      // 根据关键词过滤数据
      return data1.value.filter((item) =>
        String(item.username).includes(searchValue.value)
      );
    });
    const addData = () => {
      router.push("/Register");
      store.commit('gaiapprrr',false)
      location.reload()
    };
    // console.log(searchResult);
    provide("data", searchResult);
    return {
      dataGenerator,
      data,
      columns,
      handlePageData,
      searchValue,
      addData,
    };
  },

  created() {
    // 生命周期钩子，在组件被创建时调用
  },

  mounted() {
    // 生命周期钩子，在组件被挂载到 DOM 后调用
  },

  components: {
    ElButton,
    ElIcon,
    ElTag,
    ElTooltip,
    fenye,
  },
};
</script>

<style lang='less' scoped>
/* 样式表 */
.search-input {
  width: 200px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  color: #606266;
  transition: border-color 0.2s;
  &:focus {
    border-color: #409eff;
  }
  &::placeholder {
    color: #c0c4cc;
  }
}
</style>
